<template>
<!-- 客户列表组件 -->
    <div class="customerList-com">
        <el-table :data="tableData" border style="width: 94%;margin: 0px 3%;">
            <el-table-column prop="number" label="序号" width="50"></el-table-column>
            <el-table-column prop="id" label="客户编码" width="95"></el-table-column>
            <el-table-column prop="name" label="客户名称" width="100"></el-table-column>
            <el-table-column prop="kind" label="客户类别" width="100"></el-table-column>
            <el-table-column prop="basic" label="客户所属业务区" width="120"></el-table-column>
            <el-table-column prop="peoplenumber" label="外派人数" width="85"></el-table-column>
            <el-table-column prop="address" label="客户地址" width="200"></el-table-column>
            <el-table-column prop="contacts" label="客户联系人" width="95"></el-table-column>
            <el-table-column prop="phone" label="客户联系方式" width="110"></el-table-column>
            <el-table-column prop="condition" label="状态" width="80"></el-table-column>
            <el-table-column prop="operate" label="操作">
                <span class="sp1" @click="editContent()">查看合同</span>|
                <span class="sp2" @click="goedit()">编辑</span>|
                <span class="sp3" @click="start" v-show="isShow">{{msgs}}</span>
                <span class="sp3" @click="start" v-show="!isShow">{{msg}}</span>
            </el-table-column>
        </el-table><br>
        <!-- 分页符 -->
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
    </div>
</template>

<script>
 export default {
   data(){
     return{
        msgs:'开始合作',
        msg:'终止',
        isShow:true
     }
   },
   props:{
    //父传子这边需要用props接收一个对象（tableData）名称上下保持一致   :data="tableData"
    // 返回一个空数组
     tableData:{type:Array,default:function fn() { return [] } }
   },
    methods:{
      // 点击编辑进行客户编辑
      goedit(){
          this.$router.push({path:'/edit'})
      },
      // 查看合同客户详情查看
      editContent(){
          this.$router.push({path:'/details'})
      },
      // 点击开始合作
      start(){
        // console.log('点击前：', this.isShow);
        //  this.isShow = !this.isShow
        //  console.log('点击后：', this.isShow);
        //  console.log('==========');
      }
    }
  }
</script>

<style lang="less" scoped>
.customerList-com{
  // background-color: #fff;
    /deep/.el-table .cell{
       text-align: center;
       font-size: 14px;
     }
    /deep/.el-table th>.cell{
      text-align: center;
    }
     /deep/.el-table th{
      background-color:#fafaff;
    }
    .sp1,.sp2{
      color:#4da1ff ;
      margin-right: 10px;
      margin-left: 10px;
      // 鼠标变小手
      cursor:pointer;
    }
   .sp3{
      color:#38e274;
      margin-right: 10px;
      margin-left: 10px;
      cursor: pointer;
    }
}
</style>